<template>
    <div id="upload-component" >
        <input hidden type="text" name="" id="changeId" v-model="folderId" />
        <el-upload
            class="upload-demo"
            action="http://127.0.0.1:8080/file/file/upload/files"
            :data={fid:this.folderId}
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :before-remove="beforeRemove"
            :before-upload="validateFiles"
            multiple
            :limit="100"
            :with-credentials='true'
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary" id="upload-btn" style="display:none;">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
                <div id="title"><span>上传列表</span> </div>
                <div id='close-list' @click="closeList"> <i class="el-icon-close"></i></div>
                <div id="stretch-list">
                    <i id="up" @click="up" class="el-icon-arrow-up" style="display:none;"></i>
                    <i id="down" @click="down" class="el-icon-arrow-down"></i>
                </div>
                <div style="clear:both;"></div>
            </div>
        </el-upload>
    </div>

</template>

<script>
    import util from '../utils/util';
    import EventBus from '../utils/event-bus';
    export default {
        data() {
            return {
                fileList: [
                    // {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, 
                    // {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
                ],
                folderId:-1
            };
        },
        watch:{
            folderId:function(value){
                return util.currentFolderId;
            }
        },
        //:data={fid:this.folderId}
        methods: {
            chan(){
                console.log(this.folderId);
            },
            handleSuccess(response,file,fileList){
                console.log(response);
                // 重新加载文件列表
                EventBus.$emit("loadFileList",response.data);
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            validateFiles(file) {
                console.log("up->",file);
                //return false;
            },
            up(){
                // 显示文件列表
                let list = document.getElementsByClassName('upload-demo')[0];
                document.getElementById('up').style.display = 'none';
                document.getElementById('down').style.display = 'block';
                list.children[2].style.display='block';
                console.log(list.children[2]);
            },
            down(){
                // 隐藏文件列表
                let list = document.getElementsByClassName('upload-demo')[0];
                document.getElementById('up').style.display = 'block';
                document.getElementById('down').style.display = 'none';
                list.children[2].style.display='none';
                console.log(list.children[2]);
            },
            closeList(){
                // 关闭列表
                document.getElementById('upload-component').style.display = 'none';
                let list = document.getElementsByClassName('upload-demo')[0];
                let ul = list.children[2];
                ul.innerHTML = '';
            }
        }
  }

</script>
<style  scoped>
      /* 上传组件样式 */

    #upload-component{
      width: 360px;height: max-content;
      background-color: #fff;
      position: fixed;
      bottom: 20px;right: 40px;
      border-radius: 10px;
      box-shadow: rgb(119, 118, 118) 0px 0px 20px ;
      z-index: 9999;
      padding-bottom: 10px;
      display: none;
    }
    .el-upload__input{
        display: none;
    }
    .el-upload__tip{
        font-family: Cambria; font-size: 16px;font-weight: 600;
        padding: 0 0 5px 10px;
        border-bottom: 1px solid rgb(119, 118, 118);
    }
    input[type=file]{
        display: none;
    }
    #title{
        float: left;
    }
    #stretch-list{
        float: right;
        cursor: pointer;
    }
    #stretch-list:hover{
        background-color:rgb(236, 230, 230) ;
    }
    #close-list{
        float:right;
        margin: 0 15px 10px 10px;
        cursor: pointer;
    }
    #close-list:hover{background-color: rgb(236, 230, 230);}
    
</style>